import {defineComponent} from "vue";
import {useAppStore} from "@/stores/modules/app";
import {useSysStatusStore} from "@/stores/modules/status";
import {AppKeys, EmitNames} from "@/constants/common";
import emitter from "@utils/common/Mitt";
import {requireImg} from "@utils/common/Image";
import "../scss/Dock.scss";

/**
 * Dock 程序坞组件
 */
export default defineComponent({
  name: "DockLayout",
  setup() {
    let appStore = useAppStore();
    const { appShortcutMap } = storeToRefs(appStore);
    const { isLaunchPad } = storeToRefs(useSysStatusStore());

    /**
     * 切换class属性
     * @param e
     */
    const toggleClass = (e: MouseEvent) => {
      if (e.target) {
        const sign = e.type == "mouseleave" ? "remove" : "add";
        const { previousElementSibling: previous, nextElementSibling: next } = e.target as Element;
        const classList = "classList";
        const prev = "previousElementSibling";
        const nel = "nextElementSibling";
        if (previous) {
          previous[classList][sign]("scale1");
          previous[prev]?.[classList][sign]("scale2");
          previous[prev]?.[prev]?.[classList][sign]("scale3");
        }
        if (next) {
          next[classList][sign]("scale1");
          next[nel]?.[classList][sign]("scale2");
          next[nel]?.[nel]?.[classList][sign]("scale3");
        }
      }
    };

    const dockContent = (item: any) => {
      return (
        <div
          class="dock-item m-[4px] pb-[2px] flex flex-col justify-center items-center"
          onClick={e => {
            e.stopPropagation();
            if (item.key == AppKeys.SYSTEM_LAUNCHPAD) {
              emitter.emit(EmitNames.Launchpad, !isLaunchPad.value);
              return;
            }
            appStore.openApp(item);

            const element = (e.target as Element)["classList"] as DOMTokenList;
            element.add("dock-bounce");
            setTimeout(() => {
              element.remove("dock-bounce");
            }, 2000);
          }}
          // 鼠标离开元素时
          onMouseleave={toggleClass}
          // 鼠标移入元素时
          onMouseenter={toggleClass}
        >
          <div
            style={{ backgroundImage: "url(" + requireImg(item.icon!) + ")" }}
            class="dock-icon w-10 h-10 mb-[3px] bg-no-repeat bg-cover rounded-[10px] bg-white cursor-pointer flex items-center justify-center"
          ></div>
          {item.isRunning ? <div class="absolute mt-[54px] rounded-lg inline-block w-[5.5px] h-[5.5px] bg-black"></div> : null}
          <div class="dock-title absolute rounded-[5px] text-white text-[14px] font-medium p-[6px_12px]">
            <span v-text={item.title}></span>
            <div class="dock-out absolute border-[10px]"></div>
          </div>
        </div>
      );
    };

    return () => (
      <div id="dockLayout" class="footer">
        {/* 左边空格 */}
        <div class="space"></div>

        <div class="flex flex-row bg-white/40 border border-solid border-white/50 shadow-[0px_0px_10px_#00000033] backdrop-blur-[50px] rounded-[10px] p-0.5">
          {Object.values(appShortcutMap.value)
            .sort((a1, a2) => a1.sort - a2.sort)
            .filter((it: any) => it.isInDock)
            .map(dockContent)}

          {Object.values(appShortcutMap.value)
            .filter((it: any) => it.isKeepInDock && !it.isInDock)
            .map(dockContent)}
        </div>

        {/* 右边空格 */}
        <div class="space"></div>
      </div>
    );
  },
});
